<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>test - myTrasition</title>
        <meta name="author" content="jurnlee">
        <style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			body{
			    background-color: #F4f4f4;
			}
			#pt-main {
			    width:100%;
			    height: 100%;
			    overflow: hidden;
			    position: relative;    /*必须要有position，其与其子元素才能进行动画*/
			}
			.pt-pages {
				overflow: hidden;
				text-align:center;     /*用于page居中，继承的子元素不需要时请重写*/
				margin-top:10px;
				-webkit-perspective: 1000px;
                -moz-perspective: 1000px;
                perspective: 1000px;     /*距离用户的距离，动画的景深,3D动画需要*/
                position: relative;
			}
			.pt-page {
				overflow-x: hidden;
				overflow-y: auto;
				text-align:center;
				background:rgba(0,120,190, 0.6);
                border-radius: 5px;
				/*margin:0px auto; //page已经变成inline-block属性，所以在父级元素用text-align即可
				background-color: #cdf;
				-webkit-transform-style: preserve-3d;
                -moz-transform-style: preserve-3d;
                transform-style: preserve-3d;       转换后是否保留3D转换属性，不保留为flat*/
			}
			.opcities{
				/*opacity:0.3;
				filter:alpha(opacity=30);*/
				background:rgba(200,200,240, 0.6);
			}
			/*
			.pt-page-1 {background: #0ac2d2;}
			.pt-page-2 {background: #7bb7fa;}
			.pt-page-3 {background: #60d7a9;}
			.pt-page-4 {background: #fdc162;}
			.pt-page-5 {background: #fd6a62;}
			.pt-page-6 {background: #f68dbb;}*/
			#prev{
			    left:0px;
			    background:url(images/arrow60x120left.png) no-repeat ;
			}
			#prev:hover{
				left:0px;
				background:url(images/arrow60x120left_hover.png) no-repeat ;
			}
			#next{
			    right:0px;
			    background:url(images/arrow60x120right.png) no-repeat ;
			}
			#next:hover{
				right:0px;
				background:url(images/arrow60x120right_hover.png) no-repeat ;
			}
			#next,#prev{
			    display:none;
			    position:absolute;
                top:42%;
			    width:60px;
			    height: 120px;
			    border: none;
			    z-index: 1;
			}
			#prevarea,#nextarea{
			    margin-top:10px;
			    position:absolute;
			    height:96%;
			    z-index: 1;
			    /*opacity:0.3;
			    background-color:#0880C4; */
			}
			#nextarea{
			    right:0px;
			}
			#addpagebtn{
                position: absolute;
                top:15px;
                z-index: 1;
                border:0px;
                background: url(images/addButton40x40.gif) no-repeat;
                width: 40px;
                height: 40px;
                display: none;
			}
			.currentpage{
			}
			.hide{
			  visibility:hidden;
			  display:none;
			  
			}
			.show{
			    visibility:visible; 
			    display:block;
			}
			.hide,.show{
			    /*float:left;
				overflow: hidden;*/
					}
			.scrollbar {
						background: transparent url(images/bg-scrollbar-track-y.png) no-repeat 0 0;
						position: relative;
						background-position: 0 0;
						float: right;
						width: 15px;
					}
			.track {
						background: transparent url(images/bg-scrollbar-trackend-y.png) no-repeat 0 100%;
						height: 100%;
						width: 13px;
						position: relative;
						padding: 0 1px;
					}
			.thumb {
						background: transparent url(images/bg-scrollbar-thumb-y.png) no-repeat 50% 100%;
						height: 20px;
						width: 25px;
						cursor: pointer;
						overflow: hidden;
						position: absolute;
						top: 0;
						left: -5px;
					}
			.thumb .end {
						background: transparent url(images/bg-scrollbar-thumb-y.png) no-repeat 50% 0;
						overflow: hidden;
						height: 5px;
						width: 25px;
					}
        </style>
        <link href="script/Page Transitions/css/animations.css" rel="stylesheet" />
        <script src="script/jquery-1.9.1.min.js" type="text/javascript"> </script>
        <script src="script/tiny scrollBar - simple/jquery.tinyscrollbar.min.js"></script>
        <script type="text/javascript">
            
            $(function(){
                //*****函数区*****
                function def(){  //公共定义全局变量，需要实时赋值的变量 
                    window.windowWidth = $(window).width();
                    window.windowHeight = $(window).height();
                };
                function controlbar(){
                    $("#controlbtns").css({"left":windowWidth/2-60,"z-index":1});
                }
                function pagesize(){
                    $(".pt-page").width(windowWidth*0.85).height(windowHeight*0.96).css("margin","0px auto");
                    $("#prevarea,#nextarea").width(windowWidth*0.085);
                    $(".track").height(windowHeight*0.96);
                }
                function addbtn(){
                    var pageoffset = $(".currentpage").offset();
                    $("#addpagebtn").css("right",pageoffset.left+8);
                }

                //*****窗口变化执行的函数*****
                $(window).resize(function(){  
                    def();
                    pagesize();
                    addbtn();
                    
                 });
                 //*****第一次执行且可刷新的函数*****
                function runfirst(){
                def();
                pagesize();
                addbtn();
                eventListener();
                }
                 
               //*****监听事件*****
               function eventListener(){
                $(".currentpage").siblings("div").css({"visibility":"hidden","display":"none"});  //"visibility","hidden" "display","none"
                $("#prev").unbind().bind({"click":function(){
                    if($(".pt-page:first").hasClass("currentpage")){
                        // $("#prev").attr("disabled","disabled");
                    }else{
                        $("#prev,#next").removeAttr("disabled");
                        $(".currentpage").addClass("hide").prev().css({"visibility":"visible","display":"inline-block"}).addClass("pt-page-moveFromLeft currentpage");
                        $(".currentpage:not(:first)").removeClass("currentpage pt-page-moveFromLeft ").css({"visibility":"hidden","display":"none"});
                    }
                    eventListener();
                }});
                $("#next").unbind().bind("click",function(){
                    if($(".pt-page:last").hasClass("currentpage")){
                        //$("#next").attr("disabled","disabled");
                    }else{
                        $("#prev,#next").removeAttr("disabled");
                        $(".currentpage").addClass("hide").next().css({"visibility":"visible","display":"inline-block"}).addClass("pt-page-moveFromRight currentpage");
                        $(".currentpage:not(:last)").removeClass("currentpage pt-page-moveFromRight ").css({"visibility":"hidden","display":"none"});
                        //setTimeout(function(){$(".currentpage").prev().fadeOut();},150);  //addClass("hide") removeClass("hide")
                    }
                    eventListener();
                });
                
                //加页按钮操作
                if($(".pt-page:last").hasClass("currentpage")){
                    $("#addpagebtn").fadeIn(1000).unbind().bind("click",function(){
                        var pageContent = '<div class="pt-page"><h1>PageNext</h1></div>';
                        $(".pt-pages").append(pageContent);
                        runfirst();
                        $("#next").triggerHandler("click");
                        //***********************************
                        
                    });
                }else{
                    $("#addpagebtn").fadeOut(100);
                }
                } //eventListener end
                
                //以下为零散执行的代码
                $("#prevarea,#nextarea").hover(function(){$("#prev,#next").stop(true).fadeIn(200);},function(){$("#prev,#next"
                    ).fadeOut(500);
                    });
                    runfirst();

                   

                // $("#nextarea").unbind().bind({"mouseover":function(){},"mouseout":function(){}});
            });
        </script>
    </head>

    <body>
        <div id="controlbtns">  </div> 
        <div id="prevarea"> <input type="button" id="prev" />  </div>
        <div id="nextarea"> <input type="button" id="next" /> </div>
         
        <div id="pt-main">
            <input type="button" id="addpagebtn" />
            <div  class="pt-pages">
                <div class="pt-page pt-page-1 currentpage">
                    <h1><span>A collection of</span>页面切换效果 - Page1 \n</h1>
                    <h1><br /><br /><br /><span>A collection of</span>页面切换效果 - Page1<br /></h1>
                    <h1><span>A collection of</span><br /><br /><br />页面切换效果 - Page1</h1>
                    <h1><span>A collection of</span><br /><br /><br />页面切换效果 - Page1</h1>
                    <h1><br /><span>A collection of</span>页面切换效果 - Page1</h1><br /><br /><br /><br /><br />
                    <h1><span>A collection of</span>页面切换效果 - Page1</h1><h1><span>A collection of</span>页面切换效果 - Page1</h1>
                    <h1><span>A collection of</span>页面切换效果 - Page1</h1><h1><span>A collection of</span>页面切换效果 - Page1</h1>
                </div>
                <div class="pt-page pt-page-2"><h1><span>A collection of</span>页面切换效果 - Page2</h1></div>
                <div class="pt-page pt-page-3"><h1><span>A collection of</span>页面切换效果 - Page3</h1></div>
                <!--
                    最后一张页面
                -->
                <div class="pt-page ">
                    
                    
                    
                </div>
                
            </div>
        </div>
    </body>
</html>
